import { Tblog } from '@/type'
import { formatTime } from '@/util/util'
import { FC } from 'react'
import { useNavigate } from 'react-router-dom'
import './blogItem.less'
const BlogItem: FC<{ blogItem: Tblog }> = ({ blogItem }) => {
  const { title, goodNum, abstract, time, seeNum, collectNum, way, id } = blogItem
  const nav = useNavigate()
  const goBlogDetail = () => {
    nav(`/detail/${id}`)
  }
  const chooseColor = (way: string) => {
    switch (way) {
      case '全部':
        return 'CA97FE99'
      case 'vue':
        return '#41B88399'
      case 'react':
        return '#82d7f799'
      case 'node':
        return '#026E0099'
      case 'js':
        return '#FDD30399'
      case 'css':
        return '#0170E699'
      case '其他':
        return '#AB617399'
      case '随笔':
        return '#6a6a6a99'
      default:
        return '#AB617399'
    }
  }
  return (
    <div className="blogItem" onClick={goBlogDetail}>
      <div className="blogItem-header">
        <span style={{ color: chooseColor(way) }}>{way}</span> | {formatTime(time)}
      </div>
      <div className="blogItem-title">{title}</div>
      <div className="blogItem-content">{abstract}</div>
      <div className="blogItem-footer">
        <span>
          <i className="iconfont iconyanjing"></i>
          {seeNum}
        </span>
        <span>
          <i className="iconfont icondianzan"></i>
          {goodNum}
        </span>
        <span>
          <i className="iconfont iconshoucang"></i>
          {collectNum}
        </span>
      </div>
    </div>
  )
}
export default BlogItem
